<template>
  <div class="index container">
    <div class="card" v-for="smoothie in smoothies" :key="smoothie.id">
      <div class="card-content">
        <i class="material-icons delete" @click="deleteSmootie(smoothie.id)">delete</i>
        <h2 class="indigo-text">{{smoothie.title}}</h2>
        <ul class="ingredients">
          <li v-for="(ing,index) in smoothie.ingredients" :key="index">
            <span class="chip">{{ ing }}</span>
          </li>
        </ul>
      </div>
      <span class="btn-floating btn-large halfway-fab pink">
        <router-link :to="{name: 'EditSmoothie',params:{slug:smoothie.slug} }">
          <i class="material-icons edit">edit</i>
        </router-link>
      </span>
    </div>
  </div>
</template>

<script>
import db from "@/firebase/init";

export default {
  name: "Index",

  data() {
    return {
      smoothies: [
        // {title:'Ninja Brew',slug:'ninja-brew',ingredients:['bananas','coffee','milk'],id:1},
        // {title:'Morning Mood',slug:'moring-mood',ingredients:['mango','lime','juice'],id:2}
      ]
    };
  },

  methods: {
    deleteSmootie(id) {
      //console.log(id)
      db.collection("smoothies")
        .doc(id)
        .delete()
        .then(
          () =>
            (this.smoothies = this.smoothies.filter(
              smoothie => smoothie.id != id
            ))
        );
    }
  },
  created() {
    // fetch data from firebase
    db.collection("smoothies")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          const smoothie = doc.data();
          smoothie.id = doc.id;
          this.smoothies = [...this.smoothies, smoothie];
        });
      });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.index {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  margin-top: 60px;
}
.index h2 {
  font-size: 1.8em;
  text-align: center;
  margin-top: 0;
}

.index .ingredients {
  margin: 30px auto;
}
.index .ingredients li {
  display: inline-block;
}
.index .delete {
  position: absolute;
  top: 4px;
  right: 4px;
  cursor: pointer;
  color: #aaa;
  font-size: 1.4em;
}
</style>
